<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>个人注册</title>
    <link rel="stylesheet" href="../css/registerCss.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <header>
        <img src="../static/image/similarLogo.png" width="160px" height="70px">
        <span id="welcome">欢迎注册</span>
        <span style="float:right;margin-top:50px;margin-right: 20%;">已有账号？<a href="/page/login" style="color:red;">请登录&gt;</a></span>
    </header>
    <article>
       <div id="content">

            <div id="left">
                <img src="../static/image/registerImg.png" width="100%;" height="100%">
            </div>
            <div id="right">
                <c:if test="${requestScope.success == true}">
                    <div class="alert alert-success">
                        <strong>注册成功,请立即登录！</strong>
                    </div>
                </c:if>
                <c:if test="${requestScope.success == false}">
                    <div class="alert alert-danger">
                        <strong>该用户已存在！</strong>
                    </div>
                </c:if>

                    <form method="post" action="/service/user_register">
                        <div class="form-group">
                            <span>*</span>
                            <label for="phone">Telephone Number:</label>
                            <input type="text" class="form-control" id="phone" placeholder="Please Enter Telephone Number" name="phone">
                            <span id="phoneMsg" class="msg"></span>
                        </div>
                        <div class="form-group">
                            <span>*</span>
                            <label for="nickName">Nickname:</label>
                            <input type="text" class="form-control" id="nickName" placeholder="Please Enter Nickname" name="nickName">
                            <span id="nickNameMsg" class="msg"></span>
                        </div>
                        <div class="form-group">
                            <span>*</span>
                            <label for="password">Password:</label>
                            <input type="password" class="form-control" id="password" placeholder="Please Enter password" name="password">
                            <span id="passwordMsg" class="msg"></span>
                        </div>
                        <div class="form-group">
                            <span>*</span>
                            <label for="confirmPassword">ConfirmPassword:</label>
                            <input type="password" class="form-control" id="confirmPassword" placeholder="Please Enter ConfirmPassword" name="confirm">
                            <span id="confirmMsg" class="msg"></span>
                        </div>
                        <div class="form-check">
                            <label class="form-check-label">
                                <input class="form-check-input" type="checkbox"> Remember me
                            </label>
                        </div>
                        <button type="submit" class="btn btn-primary" style="width:400px;" onclick="return register()">立即注册</button>
                    </form>
            </div>
       </div>
    </article>
<script>
    let inputList = $('input');

    for(let i = 0; i < inputList.length - 1; i++){
        $(inputList[i]).on('blur',function(){
            let name = $(inputList[i]).attr('name'),value = $(inputList[i]).val();
            if(name == 'phone'){
                let match = /^1[35789]\d{9}$/;
                $("#phoneMsg").text(value.length == 0 ? '请输入电话号码' : !match.test(value) ? '请输入正确的格式' : '');
            }else if(name == 'nickName'){
                $('#nickNameMsg').text(value.length == 0 ? '请输入昵称' : '');
            }else if(name == "password"){
                $('#passwordMsg').text(value.length == 0 ? '请输入密码' : value.length < 6 ? '至少六位数密码' : '');
            }else if(name == 'confirm'){
                let password = $('#password'),confirm = $('#confirmPassword');
                $('#confirmMsg').text(value.length == 0 ? '请再次输入密码' : password.val() != confirm.val() ? '两次密码不一致' : '');
            }
        })
    }

    function register(){
        let msg = $('.msg');
        for(let i = 0; i < inputList.length; i++){
            if($(inputList[i]).val() == "" || $(msg[i]).text() != "") return false;
        }
        if($("#password").val() != $('#confirmPassword').val()) return false;
        return true;
    }

</script>
</body>
</html>
